<template>
  <div>
    <el-table
      :data="categoryList"
      style="width: 100%">
      <el-table-column
        label="所有品类"
        width="180">
        <template slot-scope="scope">
          <div slot="reference" class="name-wrapper">
            <span>{{ scope.row.categoryName }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="30%"
    >
      <p>当前品类:{{oldCategory}}</p>
      <el-input v-model="newCategory" placeholder="请输入新的品类内容"></el-input>
      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="affirmrev(newCategory)">确 定</el-button>
  </span>
    </el-dialog>
    <div class="addCateGory">
      <el-button type="text" style="font-size: larger" @click="display = true">新增品类</el-button>
      <el-dialog
        title="提示"
        :visible.sync="display"
        width="30%"
      >
        <el-input v-model="newCategoryName" placeholder="请输入新的品类名字"></el-input>
        <span slot="footer" class="dialog-footer">
    <el-button @click="display = false">取 消</el-button>
    <el-button type="primary" @click="addNewCategory">确 定</el-button>
  </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  name: 'chanpingpinglei',
  data () {
    return {
      categoryList: [],
      dialogVisible: false,
      display: false,
      categoryId: '',
      oldCategory: '',
      newCategory: '',
      newCategoryName: ''
    }
  },
  created: function () {
    this.$axios.post('product/queryCategory')
      .then((res) => {
        window.console.log(res.data.data)
        this.categoryList = res.data.data
      })
  },
  methods: {
    handleEdit (index, row) {
      window.console.log(index, row)
      this.dialogVisible = true
      this.oldCategory = row.categoryName
      this.categoryId = row.categoryId
    },
    handleDelete (index, row) {
      let categoryId = row.categoryId
      this.$axios.post('product/delCategory', { categoryId: categoryId })
        .then((res) => {
          window.console.log(res)
          if (res.data.code === 200) {
            alert(res.data.msg)
          }
        })
    },
    affirmrev () {
      this.dialogVisible = false
      let newName = this.newCategory
      this.$axios.post('product/editCategory', { categoryId: this.categoryId, categoryName: newName })
        .then((res) => {
          if (res.data.code === 200) {
            alert(res.data.msg)
            this.$axios.post('product/queryCategory')
              .then((res) => {
                window.console.log(res.data.data)
                this.categoryList = res.data.data
              })
          }
        })
    },
    addNewCategory () {
      this.display = false
      this.$axios.post('product/addCategory', { categoryName: this.newCategoryName })
        .then((res) => {
          if (res.data.code === 200) {
            alert(res.data.msg)
            this.$axios.post('product/queryCategory')
              .then((res) => {
                window.console.log(res.data.data)
                this.categoryList = res.data.data
              })
          }
        })
    }
  }
}
</script>
<style scoped>
  .addCateGory{
    position:absolute;
    top:80px;
    left: 700px;
  }
</style>
